<template>
    <div class="page-c">
        <div class="day-chart" id="day-chart"></div>
        <TableBS :page="page" :pot="tables.bs" :item="curItem" @hide="onBSHide"></TableBS>
        <TableMore :page="page" :pot="tables.more" :list="moreList" @hide="onMoreHide"></TableMore>
        <JLoding v-if="loading"></JLoding>
        <!-- <div class="loading" v-show="loading">loading...</div> -->
    </div>
</template>
<script lang="ts" setup>
import TableBS from "@/components/chart/component/tableBS.vue";
import TableMore from "@/components/chart/component/tableMore.vue";
import JLoding from "@/components/j-loding/index.vue";
import { get } from "@/comm/request";
import { initChartConfig } from "@/components/chart/config";
import { customStyle } from "@/components/chart/customStyle";
import { Bus, CLEVER_CHART_SWITCH, CLEVER_TYPE_SWITCH, CAPITAL_CHANGE } from "@/connetion/Bus";
import { useCapital } from "@/stores/capital";
import { ChartType, useClever } from "@/stores/clever";
import { onMounted, watch, ref, computed, reactive, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import { useLayout } from "@/stores/layout";
import { useChart } from "@/hooks/useChart";
import { URL_CAPITAL_BIGAMOUNT } from "@/comm/api";
import { sortList } from "@/comm/tooler";
const { init } = (window as any)["klinecharts"];
const route = useRoute();
const layout = useLayout();
let chart: any = null;
const interval = ref("D");
const capital = useCapital();
const clever = useClever();
const klines = ref<any[]>([]);
const hlines = ref<any[]>([]);
const chartHeight = ref("");
const tokens = computed(() => capital.curblockBalance?.contractAddress);
const { initDataChat, setChartData, maxUsdDay, appendIndicator, loading, curItem, moreList, tables, KLineType, changeChartStyle, resizeChart, flitterVolumePrecision } = useChart();
watch(
    () => clever.interval,
    (newVal, oldVal) => {
        loading.value = true;
        interval.value = newVal;
        capital.loadKlineData();
    }
);
watch(
    () => layout.newsOpen,
    (newVal, oldVal) => {
        resizeChart();
    }
);
watch(
    () => capital.klineDataList,
    (newVal, oldVal) => {
        console.log("K线图数据===================>", newVal);
        loading.value = false;
        klines.value = newVal;
        setKlineData(newVal);
    }
);
const props = defineProps({
    page: {
        type: String,
        default: ""
    }
});

const onBSHide = () => {
    tables.bs.x = -1200;
};

const onMoreHide = () => {
    tables.more.x = -1200;
};
const capitalBigAmount = async (vlaue: any[]) => {
    const startTime = vlaue[0]?.timestamp;
    const endTime = vlaue[vlaue.length - 1]?.timestamp;
    let params = {
        token: tokens.value,
        startTime,
        endTime
    };
    // console.log('机构大额异动请求参数===================>', params);
    let res: any = await get(URL_CAPITAL_BIGAMOUNT.replace("@", route.params.id + ""), params);
    hlines.value = res.data;
    hlines.value.forEach((val: any) => {
        val.timestamp = val.time;
        delete val.time;
    });
    sortList(hlines.value, "timestamp", false);
    maxUsdDay(klines.value, hlines.value, interval.value);
    // console.log('机构大额时间段===================>', interval.value)
    console.log("机构大额异动请求结果===================>", hlines.value);
};
const setKlineData = async (vlaue: any) => {
    loading.value = vlaue.length == true;
    chart = await initDataChat("day-chart");
    await setChartData(vlaue);
    flitterVolumePrecision(vlaue);
    appendIndicator("VOL", false);
    console.log("机构 K线图数据======================================>", vlaue);
    await capitalBigAmount(vlaue);
};
onMounted(async () => {
    loading.value = true
    //触发筛选条件
    Bus.on(CLEVER_TYPE_SWITCH, (val: any) => {
        console.log("切换图表筛选类==================》", val);
        if (val.value == "line") {
            KLineType.value = val.label.indexOf("line") == -1 ? "area" : "candle_solid";
            changeChartStyle(val.label.indexOf("line") == -1);
            clever.toggleChartType();
        } else {
            clever.changeInterval(val.value);
        }
    });
    //触发请求K线
    Bus.on(CAPITAL_CHANGE, (val: any) => {
        if (val == "kline") {
            console.log("触发lodding===========####");
            loading.value = true;
        }
    });
    //切换表格
    Bus.on(CLEVER_CHART_SWITCH, () => {
        capital.loadKlineData();
    });
    window.addEventListener("resize", resizeChart);
});
onUnmounted(() => {
    window.removeEventListener("resize", resizeChart);
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
